<template>
	<view :class="['header', { dark }]" :style="`height: ${headerHeight}px`">
		<view class="h-left">
			<view class="btn-style" @click="showDrawer()" style="cursor: pointer;">当前工序</view>
			<!-- <uni-icons type="home" size="30" style="font-size: 25px; cursor: pointer;color: white;"
				@click="showDrawer()" @touchstart="showDrawer()"></uni-icons> -->

			<view class="gap"></view>
			<!--  v-if="hasTwoLevels" -->
			<view style="display: flex;align-items: center;font-size: 40rpx;">
				<!-- 	<view class="back-button" @click="clickBack()">
					
					<uni-icons type="left" size="16"></uni-icons>
					<span style="cursor: pointer">首页</span>
				</view> -->
				<view>{{this.workline?this.workline.processName:''}}</view>
			</view>
		</view>
		<view class="menu-c">
			<u-image width="35px" height="35px" src="/static/logo.png"></u-image>
			<span class="band-text" style="font-size: 50rpx;">MES系统智能终端</span>
		</view>
		<view class="h-right">
			<!-- 	<view @click="open" style="cursor: pointer;margin-right: 10px;">
				<view style="width:100rpx">班组：</view>
				<view>{{ this.workline?this.workline.worklineName:''}}</view>
			</view> -->
			<!--<view @click="open" style="width:20%; cursor: pointer;margin-right: 10px;">

				 <view>{{this.workline?this.workline.worklineName:''}}</view> 
			</view>-->
			<view style="width:50%;font-size: 40rpx;" v-if="currentTime">{{this.currentTime}}</view>
			<!-- <view class="gap"></view> -->

			<view style="width:20%;cursor: pointer;margin-left: 3px;font-size: 40rpx" v-if="userName">
				<view>{{ userName }}</view>

			</view>
			<view style="font-size: 40rpx;width:20%;height:100rpx;line-height: 100rpx; cursor: pointer;margin-left: 3px;"
				@click="logout()">
				退出登录
			</view>
		</view>
		<!-- <u-popup v-model="drawer" mode="left" width="700rpx">
			<MenuList></MenuList>
		</u-popup> -->
		<view v-if="showUserMenu" class="user-menu">
			<ul>
				<li @click="logout" style="color: #000">退出登录</li>
			</ul>
		</view>

	</view>
</template>
<script>
	import MenuList from "../menulist/index.vue";

	export default {
		components: {
			MenuList,
		},
		props: {

			leftType: {
				type: String,
				default: "menu", // back
			},
			dark: {
				type: Boolean,
				default: true,
			},
			headerHeight: {
				type: Number,
				default: 60
			},
			workline: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				showUserMenu: false,
				drawer: false,
				projectName: "MES",
				subProjectName: "GDFS",
				currentTime: '',
				workstationText: "123",
				timer: null,
			};
		},

		mounted() {
			// getUserinfoAction().then((res) => {
			//   this.workstationText = res.workstationText;
			// });

			this.updateTime()
			// 每秒钟更新一次时间
			// 使用箭头函数保存this指向
			this.timer = setInterval(() => this.updateTime(), 10000);
			// console.log('store.state.vuex_user', this.$store.state.vuex_user)
		},
		beforeDestroy() {
			clearTimeout(this.timer);
			this.timer = null
		},
		computed: {
			hasTwoLevels() {
				const pages = getCurrentPages(); // 获取页面栈
				return pages.length > 1; // 如果页面栈长度大于1，返回true；否则返回false
			},
			userName() {
				return this.$store.state.vuex_user &&
					this.$store.state.vuex_user.userName ?
					this.$store.state.vuex_user.userName : 'admin';
			}
		},
		methods: {
			getuserName() {
				console.log('登录用户', this.$store.state.vuex_user.userName)
				return this.$store.state.vuex_user.userName
			},
			logout() {
				// 处理退出登录操作
				// 你可以在这里执行退出登录的逻辑，例如清除用户信息、跳转到登录页面等
				// uni.showToast({
				// 	title: '点击退出登录',
				// 	//将值设置为 success 或者直接不用写icon这个参数
				// 	icon: 'none',
				// 	//显示持续时间为 2秒
				// 	duration: 2000
				// })
				const {
					logout
				} = this.$u.api;
				const that = this;
				uni.showModal({
					title: '提示',
					content: '确定注销并退出系统吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							logout().then(res => {
								if (res.code == 200) {
									that.$u.vuex('vuex_token', '');
									uni.reLaunch({
										url: '/pages/sys/login/login'
									});
								}
							})
						} else {
							console.log('取消')
						}

					},
					fail() {}

				})



			},
			open() {
				this.showUserMenu = !this.showUserMenu
			},
			updateTime() {
				// 获取当前时间
				const now = new Date();
				let year = now.getFullYear();
				//月 getMonth()：0 ~ 11
				let month = now.getMonth() + 1;
				//日 getDate()：(1 ~ 31)
				let day = now.getDate();
				// //时 getHours()：(0 ~ 23)
				let hour = now.getHours();
				// //分 getMinutes()： (0 ~ 59)
				let minute = now.getMinutes();
				// //秒 getSeconds()：(0 ~ 59)
				let second = now.getSeconds();
				let time = year + '-' + this.addZero(month) + '-' + this.addZero(day) + ' ' + this.addZero(hour) + ':' +
					this.addZero(minute) + ':' + this.addZero(second);


				// 格式化时间并更新到界面
				this.currentTime = time;

				

			},
			//小于10的拼接上0字符串
			addZero(s) {
				return s < 10 ? ('0' + s) : s;
			},

			showDrawer() {
				this.drawer = true;
			},
			closeDrawer() {
				this.drawer = false;
			},
			handleClose(done) {
				done();
			},
			clickSetWork() {
				//   uni.redirectTo({
				//     url: "/pages/work-config/index",
				//   });
			},
			clickHome() {
				// uni.redirectTo({urT:'/pages/index/index'});
			},
			clickBack() {

				uni.navigateTo({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.header {
		min-height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40px 20px 20px 20px;
		box-sizing: border-box;
	}

	.h-left {
		display: flex;
		align-items: center;
		justify-content: left;
		width: 40%;

	}

	.menu-c {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.h-right {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		width: 30%;

	}

	.right-menu-item {
		display: inline-block;
		padding: 0 15px;
		height: 100%;
		font-size: 16px;
		color: #fff;
		vertical-align: text-bottom;

		&.hover-effect {
			cursor: pointer;
			transition: background 0.3s;

			&:hover {
				background: rgba(0, 0, 0, 0.025);
			}
		}
	}


	.user-menu {
		/* 用户菜单样式，初始状态隐藏（v-if 控制） */
		position: fixed;
		top: 130rpx;
		right: 20rpx;
		z-index: 222222;
	}

	.user-menu ul {
		list-style: none;
		padding: 0;
		margin: 0;
		border: 1px solid #e6ebf5;
		border-radius: 3px
	}

	.user-menu li {
		padding: 0 10px;
		cursor: pointer;
		transition: background 0.3s;
		color: #000;
		font-size: 32rpx;
		;
	}

	.user-menu li:hover {
		background: #f0f0f0;
		color: #000;
	}

	.user-menu li:active {
		background: #ccc;
	}

	.gap {
		width: 2px;
		height: 18px;
		background-color: #999;
		margin: 12rpx;
	}

	.dark {
		background: #00aaff;
		color: #fff;
	}

	.btn-style {
		padding: 0 20rpx;
		font-size: 40rpx;
	}
</style>